<!-- 手机信息信息 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="手机列表" name="one">
        <SearchTable :category1List="category1List" :categoryObj="categoryObj" :platformList="platformList" :orderRentTypeList="orderRentTypeList" :saleList="saleList" ref="searchTableRef" @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="手机详情" name="two">
        <FormTab
          :id="selectId"
          :category1List="category1List"
          :categoryObj="categoryObj"
          :platformList="platformList"
          :orderRentTypeList="orderRentTypeList"
          :saleList="saleList"
          :selectWhether="selectWhether"
          :finenessList="finenessList"
          :goodsTagList="goodsTagList"
          :rankList="rankList"
          v-model:formStatus="formStatus"
          @handleInitData="clearData"
          @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="phoneInfo">
import SearchTable from "@/components/rentMachineManage/phoneInfo/SearchTable.vue";
import FormTab from "@/components/rentMachineManage/phoneInfo/FormTab.vue";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
import type { TabsPaneContext } from "element-plus";
import type { IKeyedMap, TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { IRentMobileOrderType } from "@/types/rentMachineManage/phoneInfo";
import { getGoodsOrderRentTypeList } from "@/utils/api/admin/goods/goods";
import { getGoodsCategoryList } from "@/utils/api/admin/goods/goodsCategory";
import type { IGoodsCategory, ISearchGoodsCategory } from "@/types/rentMachineManage/goodsCategory";

let { getDictData } = useDictData();
/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const selectId = ref(0);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
/* 商品分类1 */
const category1List = ref<Array<IGoodsCategory>>([]);
/* 商品分类对象 */
const categoryObj = ref<IKeyedMap<string>>({});
/* 租赁模式 */
const orderRentTypeList = ref<Array<IRentMobileOrderType>>([]);
/* 平台信息 */
const platformList = ref<Array<IDictData>>([]);
/* 商品状态 */
const saleList = ref<Array<IDictData>>([]);
/* 成色 */
const finenessList = ref<Array<IDictData>>([]);

/* 是否信息 */
const selectWhether = ref<Array<IDictData>>([]);
/* 商品标签 */
const goodsTagList = ref<Array<IDictData>>([]);
/* 热销排名 */
const rankList = ref<Array<IDictData>>([]);

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理查看编辑 */
function handleViewEdit(id: number, code: ViewModeFilter) {
  selectId.value = id;
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  selectId.value = 0;
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 获取可选的租赁模式 */
function handleGetGoodsOrderRentTypeList() {
  getGoodsOrderRentTypeList<IRentMobileOrderType[], unknown>()
    .then(res => {
      /* 过滤租机模式 */
      orderRentTypeList.value = res.result.filter(item => [13, 14, 21, 24, 25, 30, 40, 43, 44, 45, 47, 48, 49].includes(item.is_advance));
    })
    .catch(() => {});
}

/* 获取商品分类 */
function handleGetGoodsCategoryList(parent_id: number, level: number, categoryList: Ref<IGoodsCategory[]>) {
  getGoodsCategoryList<IGoodsCategory[], ISearchGoodsCategory>({
    parent_id,
    level
  })
    .then(res => {
      if (level === 1) {
        let result = res.result.filter(item => {
          return [638, 9].includes(item.id);
        });
        categoryList.value = result;
        result.forEach(item => {
          categoryObj.value[item.id] = item.name;
        });
      } else {
        categoryList.value = res.result;
      }
    })
    .catch(() => {});
}

getDictData("PLATFORM_TYPE", platformList);
getDictData("GOODS_FINENESS", finenessList);
getDictData("ON_SALE_STATUS", saleList);
getDictData("WHETHER", selectWhether);
getDictData("GOODS_TAG", goodsTagList);
getDictData("RANK_INFO", rankList);

handleGetGoodsOrderRentTypeList();
handleGetGoodsCategoryList(0, 1, category1List);
</script>

<style scoped></style>
